<template>
  <div class="goods">
    <el-form
      :model="product"
      :rules="rules"
      label-width="100px"
      class="demo-product goods-form"
    >
      <el-form-item label="商品图片" clsss="">
        <label for="goodsImg" class="goods-img"
          ><i class="el-icon-plus"></i><img :src="imgUrl" alt=""
        /></label>
        <input type="file" id="goodsImg" name="goodsImg" @change="imgChange" />
        <!-- <i style="visibility: hidden">{{ timetamp }}</i> -->
      </el-form-item>
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="product.goodsName"></el-input>
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input v-model="product.price">
          <i slot="prefix" style="font-size: 25px; font-style: normal">￥</i>
        </el-input>
      </el-form-item>
      <el-form-item label="商品分类" prop="game">
        <Cascader ref="cascader" :value="value" />
      </el-form-item>
      <el-form-item label="商品描述" prop="des">
        <el-input v-model="product.des"> </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Cascader from "../../../components/Cascader.vue";
export default {
  name: "GoodsForm",
  data() {
    return {
      imgUrl: "",
      product: {
        price: "",
        des: "",
        goodsName: "",
        category: "", //类别
      },
      rules: {
        goodsName: [
          {
            min: 1,
            max: 18,
            message: "长度在 1 到 18 个字符",
            trigger: "blur",
          },
          {
            pattern: /^([\u4e00-\u9fa5]|\d|\w){1,12}$/,
            message: "请输入1-12个汉字、字母、数字和“_”组合",
            trigger: ["blur"],
          },
        ],
        price: [
          {
            require: true,
            message: "请输入价格",
            trigger: ["blur"],
          },
          {
            pattern: /^[0-9]{1,7}(.?[0-9]{1,2})?$/,
            message: "格式不正确",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  created() {
    // console.log(this.$attrs, "表单数据");
    this.product = this.$attrs.data;
    this.imgUrl = process.env.VUE_APP_BASE_API + this.product.coverImg;
    this.value = this.$attrs.data.category;
    this.timetamp=this.$attrs.timetamp
  },
  components: { Cascader },
  methods: {
    handelCascader(payload) {
      console.log(payload);
    },
    imgChange(ss) {
      let file = ss.target.files[0];
      this.file = file;
      // console.log(this.file);
      let bolb = URL.createObjectURL(file);
      this.imgUrl = bolb;
      // console.log(this.imageUrl,URL.createObjectURL(file.raw));
    },
  },
  /* beforeMounted() {
    this.product = {
      price: "",
      des: "",
      goodsName: "",
      category: "", //类别
    };
  }, */
};
</script>
<style scoped>
.goods-form img {
  display: inline-block;
  height: 100%;
  position: absolute;
  left: 180px;
}
.goods-img {
  display: inline-block;
  width: 178px;
  height: 178px;
  line-height: 178px;
  font-size: 80px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  position: relative;
  cursor: pointer;
}
#goodsImg {
  display: none;
}
</style>